<template>
  <div class="mv_class">
    <div class="tabs">
      <div class="tabs_title">
        <h4>最新MV</h4>
      </div>
      <div class="tabs_ul">
        <div class="tabs_item" :class="{ action: index === isIcation }" v-for="(item, index) in areas" :key="index" @click="chandleTabs(index)">{{ item }}</div>
      </div>
      <div class="tabs_right">
        <router-link to="/mvlist" title="查看更多MV">
          <i class="vbestui-iconfont icon-qian icon"></i>
        </router-link>
      </div>
    </div>
    <!-- 最新MV -->
    <Mvlist :mvList="firstList"></Mvlist>

    <h4>推荐MV</h4>
    <Mvlist :mvList="personaList"></Mvlist>

    <div class="tabs">
      <div class="tabs_title">
        <h4>MV排行榜</h4>
      </div>
      <div class="tabs_ul">
        <div class="tabs_item" :class="{ action: index === isRankIndex }" v-for="(item, index) in mvRank" :key="index" @click="chandleRankItem(index)">{{ item }}</div>
      </div>
      <div class="tabs_right">
        <router-link to="/mvlist" title="查看更多MV">
          <i class="vbestui-iconfont icon-qian icon"></i>
        </router-link>
      </div>
    </div>
    <Mvlist :mvList="rankList"></Mvlist>
  </div>
</template>

<script>
import { _getFirst, _Personalized, _getTopMv } from '../../network/mv'
import Mvlist from '../../components/content/mv-list/mvlist'
export default {
  name: 'Mv',
  data() {
    return {
      areas: ['内地', '港台', '欧美', '日本', '韩国'],
      mvRank: ['内地', '港台', '欧美', '日本', '韩国'],
      isIcation: 0,
      isRankIndex: 0,
      currentArea: '内地',
      tankArea: '内地',
      limit: 12,
      firstList: [],
      rankList: [],
      personaList: []
    }
  },
  components: { Mvlist },
  created() {
    this.initData()
    this.getRankMv()
    this.getPersonalizedMv()
  },
  methods: {
    initData() {
      _getFirst(this.currentArea, this.limit).then((res) => {
        this.firstList = res.data.data
      })
    },
    getRankMv() {
      _getTopMv(this.tankArea, this.limit).then((res) => {
        this.rankList = res.data.data
      })
    },
    getPersonalizedMv() {
      _Personalized().then((res) => {
        this.personaList = res.data.result
      })
    },
    // 获取最新MV
    chandleTabs(index) {
      this.isIcation = index
      this.currentArea = this.areas[index]
      this.initData()
    },

    // 获取MV排行榜
    chandleRankItem(index) {
      this.tankArea = this.mvRank[index]
      this.getRankMv()
    }
  }
}
</script>

<style lang="less" scoped>
.mv_class {
  width: 80%;
  margin: 0 auto;
  .tabs {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: span;
    .tabs_title {
      width: 14%;
      height: 50px;
      display: flex;
      align-items: center;
    }
    .tabs_ul {
      width: 50%;
      display: flex;
      justify-content: center;
      .tabs_item {
        width: 20%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .tabs_right {
      width: 10%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      i {
        text-decoration: none;
        color: #000;
      }
    }
  }
}
.action {
  color: var(--primary);
}
</style>
